<#--

    Symphony - A modern community (forum/BBS/SNS/blog) platform written in Java.
    Copyright (C) 2012-present, b3log.org

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU Affero General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU Affero General Public License for more details.

    You should have received a copy of the GNU Affero General Public License
    along with this program.  If not, see <https://www.gnu.org/licenses/>.

-->
<#include "macro-head.ftl">
<#include "common/title-icon.ftl">
<!DOCTYPE html>
<html>
    <head>
        <@head title="${symphonyLabel}">
        <meta name="description" content="${symDescriptionLabel}"/>
        </@head>
        <link rel="stylesheet" href="${staticServePath}/css/index.css?${staticResourceVersion}" />
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <link rel="canonical" href="${servePath}">
    </head>
    <body class="index">
        ${HeaderBannerLabel}
        <#include "header.ftl">
        <div class="main">
            <div class="wrapper">
                <div class="index-main">
                    <div class="index-tabs fn-flex" id="articles">
                        <span class="current" data-index="0">
                        </span>
                        <span class="tags" data-index="1">
                        </span>
                        <span class="users" data-index="2">
                        </span>
                    </div>
                    <div class="index-tabs-panels list article-list">
<#--                        <span>各栏目热贴</span>-->
                        <#list allArticlesInDomains as articlesInDomains>
                            <div class="index-domain">
                                <#assign keys=articlesInDomains?keys/>
                                <#list keys as k>
                                    <span><h2 class="title">${k}</h2></span>
                                    <ul>
                                        <#assign json = articlesInDomains[k]/>
                                        <#list json as article>
                                            <#include "common/list-item.ftl">
                                        </#list>

<#--                                        <#if json?size == 0>-->
<#--                                            <li class="ft-center">-->
<#--                                                <br><br>-->
<#--                                                ${systemEmptyLabel}<br>-->
<#--                                                ${systemEmptyTipLabel}<br>-->
<#--                                                <img src="${staticServePath}/images/404/5.gif"/>-->
<#--                                            </li>-->
<#--                                        </#if>-->
                                        <li>
                                            <a class="more" href="${servePath}/domain/${k}">${moreRecentArticleLabel}</a>
                                        </li>
                                    </ul>
                                </#list>
                            </div>
                        </#list>
<#--                        <ul>-->
<#--                            <#list recentArticles as article>-->
<#--                                <#include "common/list-item.ftl">-->
<#--                            </#list>-->
<#--                            <#if recentArticles?size == 0>-->
<#--                            <li class="ft-center">-->
<#--                                <br><br>-->
<#--                                ${systemEmptyLabel}<br>-->
<#--                                ${systemEmptyTipLabel}<br>-->
<#--                                <img src="${staticServePath}/images/404/5.gif"/>-->
<#--                            </li>-->
<#--                            </#if>-->
<#--                            <li>-->
<#--                                <a class="more" href="${servePath}/recent">${moreRecentArticleLabel}</a>-->
<#--                            </li>-->
<#--                        </ul>-->
                    </div>
                </div>
                <div class="index-side">
                    <div class="index-tabs fn-flex">
                        <span class="perfect">
                        </span>
                        <span class="check">
                        </span>
                    </div>
                    <div class="perfect-panel list">
                        <ul>
                            <#list perfectArticles as article>
                            <li>
                                <a rel="nofollow" href="${servePath}/member/${article.articleAuthorName}">
                                    <span class="avatar-small tooltipped tooltipped-se" aria-label="${article.articleAuthorName}" style="background-image:url('${article.articleAuthorThumbnailURL48}')"></span>
                                </a>
                                <a rel="nofollow" class="fn-ellipsis ft-a-title" href="${servePath}${article.articlePermalink}">${article.articleTitleEmoj}</a>
                                <a class="fn-right count ft-gray ft-smaller" href="${servePath}${article.articlePermalink}"><#if article.articleViewCount < 1000>
                                    ${article.articleViewCount}<#else>${article.articleViewCntDisplayFormat}</#if></a>
                            </li>
                            </#list>
                            <#if perfectArticles?size == 0>
                                <li>${chickenEggLabel}</li>
                            </#if>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="index__bottom">
                <div class="wrapper">
                    <#--  <div class="fn-flex-1">  -->
                    <div class="fn-clear">
                        <#list allDomains as domain>
                            <div class="module">
                                <div class="module-header">
                                    <h2>${domain.domainTitle}</h2>
                                    <a class="ft-gray fn-right" rel="nofollow" href="${servePath}/domain/${domain.domainURI}">${domain.domainTags?size} Tags</a>
                                </div>
                                <div class="module-panel">
                                    <ul class="tags fn-clear">
                                        <#list domain.domainTags as tag>
                                        <li>
                                            <a class="ft-gray ft-13" rel="nofollow" href="${servePath}/tag/${tag.tagURI}">${tag.tagTitle}</a> &nbsp;
                                        </li>
                                        </#list>
                                    </ul>
                                </div>
                            </div>
                        </#list>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 广告 -->
    <div class="_vlocvngvbra"></div>
    <script type="text/javascript">
        (window.slotbydup = window.slotbydup || []).push({
            id: "u6800113",
            container: "_vlocvngvbra",
            async: true
        });
    </script>
    <!-- 多条广告如下脚本只需引入一次 -->
    <script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js" async="async" defer="defer" >
    </script>
    
    <#include "footer.ftl">
    <script src="${staticServePath}/js/channel${miniPostfix}.js?${staticResourceVersion}"></script>
    <script type="text/javascript">
        $('.metro-item').height($('.metro-item').width());

        // tag click
        $('.preview, .index-tabs > span').click(function (event) {
            var $it = $(this),
            maxLen = Math.max($it.width(), $it.height());
            $it.prepend('<span class="ripple" style="top: ' + (event.offsetY - $it.height() / 2)
                + 'px;left:' + (event.offsetX - $it.width() / 2) + 'px;height:' + maxLen + 'px;width:' + maxLen + 'px"></span>');

            setTimeout(function () {
                $it.find('.ripple').remove();
            }, 800);
        });
    </script>
</body>
</html>
